import React, { FC } from 'react'
import { IconToggle } from '@/pages/manager/components'
import { Avatar } from '@/components/Avatar'
import { IconYes, ItemLabelWrap } from './style'
import { useSinglePollStore } from './store'
import shallow from 'zustand/shallow'
import { UserModel } from '../../blocks/user/interface'
import { useUserAllStore } from '../../blocks/user/all/store'
import { useBasicInfoStore } from '../../blocks/basicInfo/store'

export const ListItem: FC<
	UserModel & {
		isCascade: boolean
	}
> = (props) => {
	const { mcc, nestingLevel, uuid, children, attr } = props
	const superMtNum = useBasicInfoStore.getState().superMtNum
	const { openMap, tab, chosenMap, selectedKeys, clickSelectItem, itemAddToRight, update, list, flatAllTreeToList } =
		useSinglePollStore(
			(state) => ({
				openMap: state.all.openMap,
				tab: state.tab,
				selectedKeys: state.selectedList.map((x) => x.uuid),
				chosenMap: state[state.tab].chosenMap,
				clickSelectItem: state.clickSelectItem,
				itemAddToRight: state.itemAddToRight,
				update: state.update,
				list: state.list,
				flatAllTreeToList: state.flatAllTreeToList,
			}),
			shallow
		)
	const isOpen = openMap[uuid]
	const isSelected = chosenMap[uuid] ?? false
	/**勾选状态 */
	const isChecked = !superMtNum
		? tab === 'all'
			? mcc.account_type === 10
				? attr?.isSimpleCascade && selectedKeys.includes(uuid)
				: selectedKeys.includes(uuid)
			: selectedKeys.includes(uuid)
		: selectedKeys.includes(uuid)
	// const isChecked = selectedKeys.includes(uuid)
	const icon_toggle_flag = !superMtNum && tab === 'all' && mcc.account_type === 10 && !attr?.isSimpleCascade
	/**超大方全部是互动终端级联都是false  非超大方判断 常用终端false  全部判断*/
	const isCascade = superMtNum ? false : tab === 'all' ? mcc.account_type === 10 && !attr?.isSimpleCascade : false
	const handleOpenTree = () => {
		/**展开uuid*/
		openMap[uuid] = !openMap[uuid]
		useSinglePollStore.setState((s) => ({ ...s, all: { ...s.all, openMap } }))
		/**获取全部树列表*/
		const tableAll: UserModel[] = useUserAllStore.getState().tree
		/**获取全部树列表*/
		let result = flatAllTreeToList(tableAll)
		update({ list: result })
	}
	/**点击选中节点*/
	const handleClick = (e: React.MouseEvent) => {
		if (!superMtNum && tab === 'all' && mcc.account_type === 10 && !attr?.isSimpleCascade) {
			return
		}
		clickSelectItem(mcc, { ctrlKey: e.ctrlKey, shiftKey: e.shiftKey }, uuid)
	}
	/**双击添加*/
	const handleDblClick = () => {
		if (superMtNum) {
			/**超大方直接添加右侧*/
			itemAddToRight(mcc, uuid)
		} else {
			if (tab === 'all' && mcc.account_type === 10 && !attr?.isSimpleCascade) {
				/**非超大方的非简单级联展示*/
				handleOpenTree()
			} else {
				/**非超大方的 简单级联/普通终端 添加进入右侧*/
				itemAddToRight(mcc, uuid)
			}
		}
	}
	return (
		<ItemLabelWrap
			isCascade={isCascade}
			nestingLevel={nestingLevel}
			isOnline={true}
			isVip={false}
			isSelected={isSelected}
			isMeeting={mcc.account_type === 10}
			isNameBlue={false}
			isAll={tab === 'all'}
			onClick={handleClick}
			onDoubleClick={handleDblClick}
		>
			{/* {!mcc.isMt && mcc.status.isOnline && (
				<IconToggle open={!!isOpen} className="icon-toggle" onClick={handleOpenTree} />
			)} */}
			{icon_toggle_flag && <IconToggle open={!!isOpen} className="icon-toggle" onClick={handleOpenTree} />}
			<div className="avatar">
				{isChecked && <IconYes />}
				<Avatar value={mcc} size={24} />
				{/* {(isSuperMeeting ? mcc.isMt && mcc.status.isInteractive : mcc.isMt && mcc.status.isOftenMt) && (
					<IconOftenMt className="icon-often" />
				)} */}
			</div>
			{/* {mcc.isMt && mcc.status.isVip && <div className="vip">VIP</div>} */}
			<div className="name" title={mcc.name}>
				<pre data-mtid={uuid}>{mcc.name}</pre>
			</div>
		</ItemLabelWrap>
	)
}
